<template>

    <div class="tab-bar-item" @click="itemClick">
      <div  v-if="!isShow">
           <slot name="item-icon"></slot>
      </div>
      <div v-else>
        <slot name="item.icon-active" ></slot>
      </div>
        <div :style="activeStyle" >
           <slot name="item-text"></slot>

        </div>
        
       
        </div>
         <!-- <img src="@/assets/images/tabbar/home.svg" alt="">
         <p>首页</p> -->
    <!-- <div class="tab-bar-item">
       <img src="@/assets/images/tabbar/home.svg" alt="">
      <p>分类</p>
      </div>
    <div class="tab-bar-item">
       <img src="@/assets/images/tabbar/home.svg" alt="">
       <p>购物车</p>
      </div>
    <div class="tab-bar-item">
       <img src="@/assets/images/tabbar/home.svg" alt="">
       <p> 我的</p>
      </div> -->




  
</template>

<script>
export default {
  props:{
    path:String,
    activeColor:{
      type:String,
      default:'red'
    }
  },
  data(){
    return {
      // isShow:true,
    }
  },
  computed:{
    isShow(){
      // /home -> item1(/home) = true
       // /home -> item1(/category) = false
        // /home -> item1(/cart) = false
         // /home -> item1(/profile) = false
      return this.$route.path.indexOf(this.path) !== -1
    },
    activeStyle(){
      return this.isShow ? {color: this.activeColor} : {}

    }

  },
  methods:{
    itemClick(){
      this.$router.push(this.path).catch(err=>err)
    }
  }

}
</script>

<style>
.tab-bar-item{
  flex: 1;
  text-align: center;
  height: 49px;
  /* line-height: 49px; */
  font-size: 14px;
}
.tab-bar-item img{
    width: 24px;
    height: 24px;
    margin-top: 3px;
    vertical-align: middle;
    margin-bottom: 2px;
}
/* .active{
  color: red;
} */


</style>